<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
  <meta name="baidu-site-verification" content="code-UjJKh3jtOo">
  <link rel="stylesheet" href="//unpkg.com/@highlightjs/cdn-assets@11.5.0/styles/atom-one-dark.min.css">
  <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
  <title>Tit1e</title>
  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2767111597631391" crossorigin="anonymous"></script>
  
<link rel="stylesheet" href="/css/style.css">

<meta name="generator" content="Hexo 6.3.0"><link rel="alternate" href="/atom.xml" title="Tit1e" type="application/atom+xml">
</head>

<body class="dark">
    <div class="container">
    <header class="header">
  <div class="title">
      <a href="/" class="logo">Tit1e</a>
      <div class="btn-dark"></div>
      <script>
        let bodyClx = document.body.classList;
        let btnDark = document.querySelector('.btn-dark');
        let sysDark = window.matchMedia('(prefers-color-scheme: dark)');
        let darkVal = localStorage.getItem('dark');

        let setDark = (isDark) => {
        bodyClx[isDark ? 'add' : 'remove']('dark');
        localStorage.setItem('dark', isDark ? 'yes' : 'no');
        };

        setDark(darkVal ? darkVal === 'yes' : sysDark.matches);
        requestAnimationFrame(() => bodyClx.remove('not-ready'));

        btnDark.addEventListener('click', () => setDark(!bodyClx.contains('dark')));
        sysDark.addEventListener('change', (event) => setDark(event.matches));
      </script>
  </div>
    <ul class="menu">
        
        
        
        
        <li class="menu-item ">
            <a href="/" class="menu-item-link">Home</a>
        </li>
        
        
        <li class="menu-item ">
            <a href="/archives/" class="menu-item-link">Archives</a>
        </li>
        
        
        <li class="menu-item ">
            <a href="/atom.xml" class="menu-item-link">RSS</a>
        </li>
        
        
        <li class="menu-item ">
            <a target="_blank" rel="noopener" href="https://pixeltimer.art" class="menu-item-link">Pixel Timer</a>
        </li>
        
    </ul>
    <div class="search-box">
        <input type="search" id="search" placeholder="搜索">
    </div>
</header>
    <article class="post">
  <div class="post-meta">
    <span class="post-time">10 / 12, 2017</span>
  </div>
  <div class="post-title">
    <h1 class="title">浅谈 GET 和 POST 使用场景</h1>
  </div>
  
  <ul class="post-tags">
    
    <li class="tag-item">
      #学习
    </li>
    
  </ul>
  
  <div class="post-content">
    <p>网上涉及到 GET 和 POST 的讨论大多都是对比他们的区别, 而这些对比区别的文章之间又不断地打脸, 总之就是我说你是错的,他又说我是错的, 另一个跑过来又说他是错的. 看着真的是心累. 像我这种半路出家, 又是初涉前端的新人, 暂且不去讨论这两者之间原理如何如何, 总之现在能达成一致的观点是: <strong>这两者的本质是一样的.</strong></p>
<span id="more"></span>

<p>现在抛开那些东西不谈, 我就单单来谈谈 GET 和 POST 在语义和应用场景方面我的理解. 单单从语义上来讲, 能很容易理解 GET 和 POST 之间的区别. 很多刚接触前端的新人一开始接触这两个请求的时候可能第一直觉就是 GET 是用来获取数据的, POST 是用来发送数据的. 到后来他们可能才会知道原来 GET 是可以发送数据的, POST 也是可以单单来获取数据的.</p>
<p>虽然这两者到可以用来获取&#x2F;发送数据, 但是在实际场景中, 还是要按需来使用比较合适的请求方式. 比如你要分享一片文章给朋友, 那么在文章的地址中就必须带有这篇文章的一些信息, 比如文章的 ID . 当你想分享一个带有搜索条件的页面时, 那么页面的地址中也必须包含又相应的搜索信息, 不然对方打开的是一个不带任何参数的url, 那对方怎么知道你在当时选中的文章或搜索条件是什么呢? 所以这种场景下, 用 GET 就比 POST 更加符合我们实际的应用场景. 而如果你发表了一片文章, 那么 GET 提交就不是太合适了, 因为 url 是有长度限制的, 虽然各家浏览器对 url 对长度的限制各不相同, 但是开发者又如何知道用户用什么浏览器来访问呢. 所以这种情况下, POST 明显比 GET 更加适合.</p>
<p>所以我觉得下面这些最最表面的区别从使用场景的角度来说并没有错, 因为这些的的确确是在实际的使用场景中能直观感受到的区别</p>
<blockquote>
<p>1.GET后退按钮&#x2F;刷新无害，POST数据会被重新提交（浏览器应该告知用户数据会被重新提交）。</p>
<p>2.GET书签可收藏，POST为书签不可收藏。GET能被缓存，POST不能缓存 。</p>
<p>3.GET历史参数保留在浏览器历史中。POST参数不会保存在浏览器历史中。GET对数据长度有限制，当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）。POST无限制。</p>
<p>4.GET只允许 ASCII 字符。POST没有限制。也允许二进制数据。与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分。在发送密码或其他敏感信息时绝不要使用 GET ！POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中。</p>
<p>5.GET的数据在 URL 中对所有人都是可见的。POST的数据不会显示在 URL 中。</p>
</blockquote>
<p>而要往深了说的话,这些答案就给人一种答非所问的感觉了. </p>
<p>所以,在问这个问题的时候最好也带上一些” GET 参数”, 比如: “ GET 和 POST 在使用场景下有什么区别?”; 再如: “ GET 和 POST 本质上有什么区别?”</p>

  </div>
  <div class="post-near">
    
    <a
      class="post-near-prev"
      href="/p/e73474fd.html"
      title="div 包裹 img 底部出现空隙问题"
    >
      <span class="arrow">←</span>
      <span class="post-near-title">
        div 包裹 img 底部出现空隙问题
      </span>
    </a>
    
    
    <a
      class="post-near-next"
      href="/p/b94eede0.html"
      title="一些工作中常用到的代码(二)"
    >
      <span class="post-near-title">
        一些工作中常用到的代码(二)
      </span>
      <span class="arrow">→</span>
    </a>
    
  </div>
</article>

    <footer class="footer">
  <p>本博客采用 <a class="license-link" rel="license noopener" target="_blank" href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh">署名-非商业性使用-相同方式共享 4.0 国际</a>协议进行许可</p>
  <p>
    <span>Thanks For <a target="_blank" rel="noopener" href="https://github.com/nanxiaobei/hugo-paper" taget="_blank">hugo-paper</a></span>
    <span style="margin-left: 10px;">&copy; 2016-2025 by Tit1e</span>
  </p>
</footer>
    </div>
    <script src="//unpkg.com/@highlightjs/cdn-assets@11.5.0/highlight.min.js"></script>
<script>
  hljs.initHighlightingOnLoad();
  var _hmt = _hmt || [];
    (function() {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?6349d3bc54baea0b04a65145c5e3b799";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
    })();
    const block = document.querySelectorAll('.post-content')[0]
    block.addEventListener('click', e => {
        const {nodeName, src} = e.target
        if(nodeName !== 'IMG') return
        document.body.classList.add('overflow-hidden')
        const div = document.createElement('div')
        div.id = 'global-cover'
        div.title = '点击关闭'
        const a = document.createElement('a')
        a.href = src
        a.target="_blank"
        a.title = '点击打开原图'
        const img = document.createElement('img')
        img.className = 'show-pic'
        img.src = src
        a.appendChild(img)
        div.appendChild(a)
        document.body.appendChild(div)
    })
    document.body.addEventListener('click', e => {
        if(e.target.id === 'global-cover'){
            document.body.classList.remove('overflow-hidden')
            document.body.removeChild(e.target)
        }
    })
</script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-7M04VN3JZ4"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-7M04VN3JZ4');
</script>

<script src="/js/search.js"></script>


</body>
</html>